<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  initBar();
  initLine();
  initPie();
  initBarLine();
});

const initBar = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChartRef = echarts.init(document.getElementById('mainBar'));
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '柱状图示例'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChartRef.setOption(option);
};

const initLine = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChartRef = echarts.init(document.getElementById('mainLine'));
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '折线图示例'
    },
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C']
    },
    tooltip: {
      trigger: 'axis'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150],
        type: 'line'
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChartRef.setOption(option);
};

const initBarLine = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChartRef = echarts.init(document.getElementById('mainBarLine'));
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '折柱混合示例'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // 可点击
      selectedMode: true,
      data: ['注册用户', '累计用户量'],
      bottom: 0
    },
    grid: {
      left: 100
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        // 不显示分割线
        splitLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '注册用户',
        // 显示分割线
        splitLine: {
          show: true
        }
      },
      {
        type: 'value',
        name: '累计用户量',
        splitLine: {
          show: true
        }
      }
    ],
    series: [
      {
        name: '注册用户',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        itemStyle: {
          color: 'rgb(63,70,227)'
        }
      },
      {
        name: '累计用户量',
        type: 'line',
        yAxisIndex: 1,//索引从0开始
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
        itemStyle: {
          color: 'rgb(110,238,233)'
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChartRef.setOption(option);
};

const initPie = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChartRef = echarts.init(document.getElementById('mainPie'));
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '饼图示例'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChartRef.setOption(option);
};
</script>

<template>
  <div class="v-echarts-container">
    <div class="v-echarts-container-item">
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="mainBar" class="v-charts"></div>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="mainLine" class="v-charts"></div>
    </div>
    <div class="v-echarts-container-item">
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="mainPie" class="v-charts"></div>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="mainBarLine" class="v-charts"></div>
    </div>
  </div>
</template>

<style scoped>
.v-echarts-container {
  height: 100%;
  
  .v-echarts-container-item {
    width: 100%;
    height: 50%;
    display: flex;
    
    > div {
      height: 100%;
      flex: 1;
      border: 1px solid #ccc;
    }
  }
}

.v-charts {
  width: 100%;
  height: 100%;
}
</style>